<template>
  <div class="myDiv">
    <tou title="脉探设备信息"></tou>
    <div class="chaxun">
      <div class="chaxunleft">
        <van-field v-model="deviceNo" placeholder="请输入检索编码" label-width="80px" label="设备编码" />
        <van-field v-model="address" placeholder="请输入检索名称" label-width="80px" label="设备名称" />
      </div>
      <div class="chaxunright">
        <van-button type="info" size="small" @click="add">添加</van-button>
        <van-button type="info" size="small" style="margin-top: 5px;" @click="getAllOrganzation">查询</van-button>
      </div>
    </div>
    <el-table
      size="mini"
      :data="vesssel"
      height="458"
      v-loading="loading"
      border
      style="width: 100%"
      :stripe="true"
      :cell-style="{padding:'9px 0'}"
      @row-click="godetails"
    >
      <el-table-column
        align="center"
        fixed
        prop="address"
        show-overflow-tooltip
        label="名称"
        width="100"
      ></el-table-column>
      <el-table-column align="center" prop="orgname" show-overflow-tooltip label="使用者"></el-table-column>
      <el-table-column align="center" prop="deviceNo" label="编码" show-overflow-tooltip width="100"></el-table-column>
      <el-table-column align="center" prop="company" label="放置地区" show-overflow-tooltip></el-table-column>
    </el-table>
    <pag :total="total" ref="page" @pagenum="pagenum"></pag>
  </div>
</template>
  
  <script>
import tou from "@/components/header";
import pag from "@/components/pagination";
export default {
  components: { tou, pag },
  props: {},
  data() {
    return {
      checked: false,
      page: 1,
      rows: 9,
      total: 0,
      deviceNo: "",
      loading: true,
      address: "",
      vesssel: [], //页面临时数据
      tableData: []
    };
  },
  watch: {
    page: function() {
      if (this.page == 1) {
        this.vesssel = this.tableData.slice(0, this.rows);
      } else if (this.page == Math.ceil(this.tableData.length / this.rows)) {
        this.vesssel = this.tableData.slice((this.page - 1) * this.rows);
      } else {
        this.vesssel = this.tableData.slice(
          (this.page - 1) * this.rows,
          this.rows * this.page
        );
      }
    }
  },
  computed: {},
  methods: {
    pagenum(data) {
      this.page = data[0];
      this.rows = data[1];
    },
    // 查询设备
    getAllOrganzation() {
      let state = "0";
      if (this.checked == true) {
        state = "1";
      }
      this.$http(this.api.getAllOrganzation, {
        state: state,
        deviceNo: this.deviceNo,
        address: this.address,
        sort: "addtime",
        order: "desc"
      }).then(res => {
        if (res.status === 200) {
          if (res.data.result == "true") {
            this.tableData = res.data.pageData.data;
            this.vesssel = this.tableData.slice(0, this.rows);
            this.loading = false;
            this.total = res.data.pageData.total;
            this.$refs.page.changecurrent(1);
          }
        }
      });
    },
    // 修改设备
    godetails(data) {
      if (this.$store.state.userinfo.userkind == 1) {
        data.isadd = false;
        this.$http(this.api.selectDataTypesByDeviceNo, {
          deviceNo: data.deviceNo,
          orgcode: data.orgcode
        }).then(res => {
          if (res.data.result == "true") {
            let result = res.data.pageData.data;
            this.$router.push({
              name: "pricedetails",
              query: { data, result }
            });
          } else {
            this.Tips(res.data.message, "warning");
          }
        });
      } else {
        this.$router.push({
          name: "pricedetails",
          query: { data }
        });
      }
    },
    // 添加设备
    add() {
      this.$router.push({ name: "pricedetails", query: { isadd: true } });
    }
  },
  created() {
    this.getAllOrganzation();
  },
  mounted() {}
};
</script>
  <style scoped>
.chaxun {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.chaxunleft {
  width: 70%;
}
.chaxunright {
  display: flex;
  flex-direction: column;
  align-content: space-between;
}
.tf {
  display: flex;
  align-items: center;
  margin: 10px 0 10px 15px;
}
</style>